<template>
  <div style="position: fixed; top: 0;z-index: 500;">
    <header class="headerTrans">
      <!--        <div class="headerBox">-->
<!--      <router-link to="/">-->
        <img :src="icon" alt=""
             style="position: fixed; height: 8vh;width: 8vh; left: 8vh; top: 0.8vh; z-index: 60" @click="drawer=true">

<!--      </router-link>-->
      <!--        <img :src="titleImg" alt=" " height="75px" style="position: fixed; height: 75px; left: 150px">-->

      <!--        </div>-->
    </header>
    <!--  <div style="position: fixed; z-index: 60; right: 10vw;top: 3vh;margin-right: 3vw">-->
    <!--    &lt;!&ndash;      <router-link to="/login" style="margin-right: 2vw">&ndash;&gt;-->
    <!--    <el-button type="primary" @click="loginFormVisible=true">登录</el-button>-->
    <!--    &lt;!&ndash;      </router-link>&ndash;&gt;-->
    <!--    &lt;!&ndash;      <router-link to="/register" style="margin-right: 2vw">&ndash;&gt;-->
    <!--    <el-button type="success">注册</el-button>-->
    <!--    &lt;!&ndash;      </router-link>&ndash;&gt;-->
    <!--  </div>-->
<!--    <a href="https://readpaper.com/help#tab=reading" style="position: fixed; z-index: 60; margin-left: 50vw;top: 2vh;"><h2>参考一下</h2></a>-->
    <md-input v-model="searchContent" autocomplete="off" name="邮箱" placeholder="随处搜索"
              style="position: fixed; z-index: 60; right: 15vw;top: -1vh;">
      搜索
    </md-input>
    <el-dropdown style="position: fixed; z-index: 60; right: 10vw;margin-top: 8vh; margin-right: 1vw"
                 :disabled="!this.$store.isLogin">
      <el-avatar style="position: fixed; z-index: 60; right: 10vw;top: 3vh;" shape="square" size="large"
                 :src="squareUrl" @click=" callLogin "></el-avatar>
      <template #dropdown style="top: 7vh">
        <el-dropdown-menu>
          <router-link to="/profile">
            <el-dropdown-item>门户展示</el-dropdown-item>
          </router-link>
          <router-link to="/messageList">
            <el-dropdown-item>消息列表</el-dropdown-item>
          </router-link>
          <router-link to="/Info">
            <el-dropdown-item>修改信息</el-dropdown-item>
          </router-link>
          <router-link to="/certificate">
          <el-dropdown-item>认证学者</el-dropdown-item>
            <router-link to="/appeal">
              <el-dropdown-item>申诉</el-dropdown-item>

            </router-link>
          </router-link>
          <router-link to="/">
            <el-dropdown-item>首页</el-dropdown-item>
          </router-link>
          <el-dropdown-item divided @click="logout()">登出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
  <el-dialog v-model="loginFormVisible" center width="30vw" custom-class="radius-dialog">
    <template #title style="width:5vw">
      <img :src="iconBlack" alt="">
    </template>
    <el-form :model="loginForm" label-position="left">
<!--      todo:表单验证-->
      <!--      <el-form-item label="姓名" :label-width="formLabelWidth">-->
      <!--        <el-input v-model="loginForm.name" autocomplete="off" placeholder="请输入真实姓名"></el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="机构" :label-width="formLabelWidth">-->
      <!--        <el-select v-model="loginForm.institute" placeholder="Please select a zone">-->
      <!--          <el-option label="BUAA" value="BUAA"></el-option>-->
      <!--          <el-option label="NUAA" value="NUAA"></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <md-input v-model="loginForm.email" autocomplete="off" name="邮箱" placeholder="仅支持.edu邮箱">
        邮箱
      </md-input>
      <md-input v-model="loginForm.password" type="password" autocomplete="off" name="密码" placeholder="请输入密码">
        密码
      </md-input>
      <md-input
          ref="verify"
          v-model="loginForm.verify"
          placeholder="请填写验证码"
          style="width:60%;"
      >验证码
      </md-input>
      <div class="code" @click="refreshCode"
           style="float:right;margin-top: -5vh;">
        <security :identify-code="identifyCode" @click="refreshCode"/>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="loginFormVisible = false; registerFormVisible=true">注册</el-button>
        <el-button type="primary" @click="login(); loginFormVisible = false"
        >登录
        </el-button
        >
      </div>
      <el-checkbox v-model="isremembered" label="是否记住密码" size="small" style="margin-top: 1vh;"></el-checkbox>

    </template>
  </el-dialog>
  <el-dialog v-model="registerFormVisible" center width="30vw" custom-class="radius-dialog">
    <template #title style="width:5vw">
      <img :src="iconBlack" alt="">
    </template>
    <el-form :model="registerForm" label-position="left">
      <!--      <el-form-item label="姓名" :label-width="formLabelWidth">-->
      <!--        <el-input v-model="loginForm.name" autocomplete="off" placeholder="请输入真实姓名"></el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="机构" :label-width="formLabelWidth">-->
      <!--        <el-select v-model="loginForm.institute" placeholder="Please select a zone">-->
      <!--          <el-option label="BUAA" value="BUAA"></el-option>-->
      <!--          <el-option label="NUAA" value="NUAA"></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <md-input v-model="registerForm.name" autocomplete="off" name="邮箱" placeholder="请输入真实姓名"
                style="margin: 0 5px;">
        姓名
      </md-input>
<!--      <md-input v-model="registerForm.institute" autocomplete="off" name="邮箱" placeholder="如北京航空航天大学"-->
<!--      >-->
<!--        当前所属机构-->
<!--      </md-input>-->
      <md-input v-model="registerForm.email" autocomplete="off" name="邮箱" placeholder="仅支持.edu邮箱"

      >
        邮箱
      </md-input>
      <md-input
          ref="verify"
          v-model="registerForm.verify"
          placeholder="请填写验证码"
          style="width:60%;"
      >验证码
      </md-input>
      <div class="code" @click="sendCode"
           style="float:right;margin-top: -5vh;">
        <el-button>发送验证码</el-button>
      </div>
      <md-input v-model="registerForm.password" autocomplete="off" name="密码" placeholder="请输入密码">
        设置密码
      </md-input>
      <md-input v-model="registerForm.password" autocomplete="off" name="密码" placeholder="请确认密码">
        确认密码
      </md-input>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="register();registerFormVisible = false; loginFormVisible=true;">注册</el-button>
        <el-button type="primary" @click="registerFormVisible = false; loginFormVisible=true"
        >返回
        </el-button
        >
      </div>
      <el-checkbox v-model="isremembered" label="是否记住密码" size="small" style="margin-top: 1vh;"></el-checkbox>

    </template>
  </el-dialog>
  <el-drawer size="70%" z-index="80" direction="ltr" v-model="drawer" title="I am the title" :with-header="false">
    <el-menu
        :default-active="activeIndex"
        background-color="#00000000"
        text-color="#000000"
        active-text-color="#ffd04b"
        @select="handleSelect"
        router
        default-active="/"
        class="el-menu"
        style=""
    >
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/journalList">期刊列表</el-menu-item>
      <el-menu-item index="/category">分类浏览</el-menu-item>
      <el-menu-item index="/institute">机构</el-menu-item>
      <el-menu-item index="/help">帮助</el-menu-item>
      <el-menu-item index="3">查重</el-menu-item>
      <el-menu-item index="7">更多</el-menu-item>
    </el-menu>
  </el-drawer>
</template>

<script>
import {ref} from "vue";
import MdInput from './MDinput'
import security from "./Security/security";
import {ElMessage} from "element-plus";

export default {
  name: "NavigatorMenuMobile",
  components: {
    MdInput,
    security
  },
  data() {
    return {
      activeIndex: ref(this.$route.path),
      squareUrl: '',
      drawer:false,
      icon: require('../assets/images/iconwhite.svg'),
      iconBlack: require('../assets/images/icon.svg'),
      loginFormVisible: false,
      loginForm: {
        email: '',
        password: ''
      },
      registerFormVisible: false,
      registerForm: {
        institute: '',
        name: '',
        email: '',
        password: ''
      },
      formLabelWidth: '12vw',
      isremembered: false,
      identifyCodes: "1234567890abcd",
      identifyCode: "",
      searchContent: {}
    }
  },
  created() {
    if (this.$store.isLogin)
      this.squareUrl = 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
    else
      this.squareUrl = 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
  },
  mounted() {
    // document.addEventListener('scroll', this.changeHeader, true)
  },
  methods: {
    changeHeader() {
      var header = document.querySelector('header')
      // var headerBox = document.querySelector('.headerBox')
      if (window.pageYOffset >= 15) {
        header.className = 'changeWhite'
        this.icon = require('../assets/images/icon.svg')
        // headerBox.className = 'headerBox1'
      } else {
        header.className = 'headerTrans'
        this.icon = require('../assets/images/iconwhite.svg')
        // headerBox.className = 'headerBox'
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
            this.randomNum(0, this.identifyCodes.length)
            ];
      }
      console.log(this.identifyCode);
    },
    sendCode() {
      ElMessage({
        showClose: true,
        message: '验证码发送成功',
        type: 'success',
      })
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    register() {
      //todo:注册
      ElMessage({
        showClose: true,
        message: '注册成功',
        type: 'success',
      })
    },
    callLogin() {
      if (!this.$store.isLogin) {
        this.loginFormVisible = true;
        this.refreshCode()
      }
    },
    login() {
      // todo:和后端交互
      ElMessage({
        showClose: true,
        message: '登录成功',
        type: 'success',
      })
      this.squareUrl = 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
      this.$store.isLogin = true
    },
    logout() {
      this.$store.isLogin = false;
      this.squareUrl = 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
      ElMessage({
        showClose: true,
        message: '退出成功',
        type: 'success',
      })
      location.reload()
    }
  }
}
</script>

<style scoped>
.headerTrans * {
  background: transparent;
  transition: 1.5s;
  height: 10vh;
  border: none;
  color: white;
  z-index: 50;

  /*background: transparent;*/
}

.headerTrans {

}

.changeWhite {
  color: #232121;
  background: white;
  transition: 1.5s;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 100%;
  height: 10vh;
  position: fixed;
  z-index: 50;
}

.el-menu {
  position: fixed;
  width: 60vw;
  left: 10vw;
  z-index: 200;
  top: 10vh;
  height: 10vh;
}

.el-menu > * {
  height: 10vh;
  line-height: 10vh;
  max-width: 6.5vw;
  width: 7.5vw;
  font-size: 21px;
}

</style>
<style lang="scss">
.radius-dialog {
  padding: 5px 15px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  //filter: blur(4px);
}

.md-input {
  background: none;
  color: white;
}
</style>
